<template>
    <div>
        <l-table :loading="tableLoading" :columns="columns" :dataSource="tableData" :isPage="true" ref="lrTable"
            :pageTotal="tableTotal" :tablePage.sync="tableCurrentPage" @loadPageData="turnTablePage"
            :key="Math.random()">
            <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
        </l-table>

        <!--表单-->
        <l-dialog :title="$t(formTitle)" :visible.sync="formVisible" :height="522" :width="487" @ok="handleSave"
            @close="handleCloseForm" @opened="handleOpenedForm">
            <add-record v-if="formTitle == '编辑'" ref="addRecord" :isReadOnly="formDetails" :id="formEditRow.f_Id" />
            <div v-else-if="this.formTitle == '附件查看'" class="erpCase flex_img">
                <l-upload :disabled="true" style="margin: 16px;" :limit="2" v-model="formEditRow.f_File"
                    showFileList="uploadTheme1" />
            </div>
        </l-dialog>
    </div>
</template>

<script>
const api = window.$api.erpcase.customerGather
import AddRecord from './addRecord';
export default {
    props: {
        id: String,
    },
    components: {
        AddRecord,
    },
    data() {
        return {
            // 查询参数
            f_Description: '',

            tableLoading: false,
            tableTotal: 0,
            tableCurrentPage: 1,
            tablePageSize: 50,
            columns: [
                { id: 'f_AmountCollect', prop: 'f_AmountCollect', label: '回款金额' },
                { id: 'f_Description', prop: 'f_Description', label: '备注' },
                { id: 'f_Date', prop: 'f_Date', label: '回款日期', dataType: 'datetime', format: 'yyyy-MM-dd' },
                { id: 'f_CreateDate', prop: 'f_CreateDate', label: '创建日期', dataType: 'datetime', format: 'yyyy-MM-dd' },
                { id: 'f_CreateUserName', prop: 'f_CreateUserName', label: '创建人' },
            ],
            tableData: [],
            tableBtns: [
                { prop: 'Edit', label: '编辑', width: 80 },
                { prop: 'Look', label: '附件查看' },
                { prop: 'Delete', label: '删除' },
            ],

            // 表单参数
            formVisible: false,
            formTitle: '',
            formEditRow: null,
            formEdit: false,
            formDetails: false,
        };
    },
    mounted() {
        this.init();
        this.$nextTick(() => {
            this.$refs.lrTable.doLayout()
        })
    },
    methods: {
        async init() {
            // this.tableData = []
            this.loadTableData();
            // console.log("init")
        },

        handleEdit($index, row) {
            this.formEdit = true
            this.formDetails = false
            this.formEditRow = row
            this.handleShowForm('编辑')
        },
        handleLook($index, row) {
            // this.formEdit = true
            // this.formDetails = false


            if (row.f_File != '') {
                this.formEditRow = row
                this.handleShowForm('附件查看')
            } else {
                this.$message({
                    type: 'info',
                    message: this.$t('未上传附件!')
                })
            }
        },
        handleDelete($index, row) {
            this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
            }).then(async () => {
                this.tableData.splice($index, 1);
                this.tableTotal--
                // await api.remove(row.f_Id)
                await this.$awaitWraper(api.deleteRecord(row.f_Id))
                this.$message({
                    type: 'success',
                    message: this.$t('删除成功!')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('已取消删除!')
                })
            })
        },
        handleSearch() {
            this.loadTableData();
        },

        turnTablePage({ rows }) {
            this.tablePageSize = rows;
            this.loadTableData(true);
        },
        async loadTableData(isNotFirst) {
            if (!isNotFirst) {
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true;
            let queryData = {};
            queryData.f_GatherId = this.id;
            queryData.f_Description = this.f_Description;
            queryData.rows = this.tablePageSize;
            queryData.page = this.tableCurrentPage;
            queryData.sidx = "F_Id";
            let data = await this.$awaitWraper(api.getRecordPage(queryData))
            if (data != null) {
                this.tableData = data.rows;
                this.tableTotal = data.records;
            } else {
                this.tableData = [];
            }
            this.tableLoading = false;
        },

        handleShowForm(text) {
            this.formTitle = text
            this.formVisible = true
        },


        async handleOpenedForm(showLoading, hideLoading) {
            if (this.formEdit) {
                showLoading('加载数据中...')
                if (this.formTitle == '编辑') {
                    await this.$refs.addRecord.loadFormData({ keyValue: this.formEditRow.f_Id })
                }


                hideLoading()
            }
        },

        async handleSave(showLoading, hideLoading) {
            showLoading('保存数据中...')
            if (this.formTitle == '编辑') {
                if (await this.$refs.addRecord.validateForm()) {
                    const res = await this.$refs.addRecord.saveForm({ keyValue: this.formEditRow.f_Id, isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : '新增成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.loadTableData();
                        this.formVisible = false


                    }
                }
            }
            hideLoading()

        },
        handleCloseForm() {
            if (this.formTitle == '编辑') {
                this.$refs.addRecord.resetForm()
            }
        }
    },
};
</script>